/*
 * Copyright 2022 LookerSong
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

let ctx0;

export default {
    props: {
        imageWidth: {
            type: Number,
            default: 500 // 图片宽度
        },
        imageHeight: {
            type: Number,
            default: 500 // 图片高度
        },
        imageSrc: {
            type: String,
            default: "" // 图片地址
        },
        scale: {
            type: Number,
            default: 2 // 放大比例
        },
    },
    data: {
        initwidth: 0, // 接收源图的宽度
        initheight: 0, // 接收源图的高度
        points: { // 原图的裁剪起点坐标（左上角起）
            x: 0,
            y: 0
        },
        isZoom: false, // 图片处于放大状态
        img: new Image(),
    },

    onInit() {
        this.img.src = this.imageSrc;
        let sss = setTimeout(() => {
            this.imageInit();
        }, 50);
    },

    // 画图初始化
    imageInit() {
        ctx0 = this.$refs.zoom.getContext('2d');
        let init = new Image();
        init.src = this.img.src
        init.onload = () => {
            ctx0.drawImage(init, 0, 0, init.width, init.height, 0, 0, this.imageWidth, this.imageHeight);
            this.initwidth = init.width;
            this.initheight = init.height;
        };
    },

    // 切换镜头远近
    zoomswitch() {
        this.isZoom = !this.isZoom;
        let changeview = new Image();
        changeview.src = this.img.src;
        if (true == this.isZoom) {
            console.log("拉近镜头");
            changeview.onload = () => {
                ctx0.drawImage(changeview,
                    this.initwidth / 2 - this.initwidth / this.scale / 2,
                    this.initheight / 2 - this.initheight / this.scale / 2,
                    changeview.width / this.scale,
                    changeview.height / this.scale,
                    0, 0,
                    this.imageWidth, this.imageHeight);
            };
        }
        else {
            console.log("恢复全局视角");
            changeview.onload = () => {
                ctx0.drawImage(changeview,
                    0, 0,
                this.initwidth, this.initheight,
                    0, 0,
                this.imageWidth, this.imageHeight);
            };
        }
    },

    // 在图片区域内移动可视区域
    getmove(event) {
        if (false == this.isZoom) {
            return;
        }
        this.points.x = (event.touches[0].localX - this.imageWidth / this.scale / 2) / this.imageWidth * this.initwidth;
        this.points.y = (event.touches[0].localY - this.imageHeight / this.scale / 2) / this.imageHeight * this.initheight;
        if (((this.imageWidth / this.scale / 2) > event.touches[0].localX)
        || ((this.imageWidth - this.imageWidth / this.scale / 2) < event.touches[0].localX)) {
            if ((this.imageWidth / this.scale / 2) > event.touches[0].localX) {
                this.points.x = 0;
            }
            else {
                this.points.x = this.initwidth - this.initwidth / this.scale;
            }
        }
        if (((this.imageHeight / this.scale / 2) > event.touches[0].localY)
        || ((this.imageHeight - this.imageHeight / this.scale / 2) < event.touches[0].localY)) {
            if ((this.imageHeight / this.scale / 2) > event.touches[0].localY) {
                this.points.y = 0;
            }
            else {
                this.points.y = this.initheight - this.initheight / this.scale;
            }
        }
        let newview = new Image();
        newview.src = this.img.src;
        newview.onload = () => {
            ctx0.drawImage(newview,
            this.points.x, this.points.y,
                newview.width / this.scale, newview.height / this.scale,
                0, 0,
            this.imageWidth, this.imageHeight);
        };
    },
}
